<template>
    <div>
        <el-card>
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/orderOperate' }"
                    >科室选择</el-breadcrumb-item
                >
                <el-breadcrumb-item>日期选择</el-breadcrumb-item>
                <el-breadcrumb-item>挂号</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <i class="iconfont icon-r-love" style="font-size: 22px;"><b>科室门诊</b></i> -->
            <el-divider></el-divider>
            <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center;">
    
 <!-- 内科类部分 -->
 <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center; margin-bottom: 20px;">
            <i class="iconfont icon-r-love" style="font-size: 26px; color: #409EFF;margin-top: 22px;margin-left: 5px;"></i>
            <b style="margin-left: 10px;margin-top: 21px; color: #333;">内科类</b>

            <!-- 下拉菜单 -->
            <el-dropdown style="margin-left: 20px;margin-top: 22px;">
                <el-button 
                    type="primary" 
                    size="small" 
                    style="background-color: #409EFF; color: white; border-radius: 4px; font-size: 14px; padding: 5px 15px;">
                    点击选择 <i class="el-icon-arrow-down"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" style="min-width: 200px;">
                    <el-dropdown-item 
                        v-for="inter in inters" 
                        :key="inter"
                        class="dropdown-item">
                        <el-button
                            size="mini"
                            @click="sectionClick(inter)"
                            style="width: 100%; text-align: left; background-color: transparent; border: none;">
                            {{ inter }}
                        </el-button>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center; margin-bottom: 20px;">
            <i class="iconfont icon-r-love" style="font-size: 26px; color: #409EFF;margin-top: 22px;margin-left: 5px;"></i>
            <b style="margin-left: 10px;margin-top: 21px; color: #333;">外科类</b>

            <!-- 下拉菜单 -->
            <el-dropdown style="margin-left: 20px;margin-top: 22px;">
                <el-button 
                    type="primary" 
                    size="small" 
                    style="background-color: #409EFF; color: white; border-radius: 4px; font-size: 14px; padding: 5px 15px;">
                    点击选择 <i class="el-icon-arrow-down"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" style="min-width: 200px;">
                    <el-dropdown-item 
                        v-for="out in outs" 
                        :key="out"
                        class="dropdown-item">
                        <el-button
                            size="mini"
                            @click="sectionClick(out)"
                            style="width: 100%; text-align: left; background-color: transparent; border: none;">
                            {{ out }}
                        </el-button>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
     
        
    </div>
    
            <el-divider></el-divider>
            <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center;">
    
    
           <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center; margin-bottom: 20px;">
               <i class="iconfont icon-r-love" style="font-size: 26px; color: #409EFF;margin-top: 22px;margin-left: 5px;"></i>
               <b style="margin-left: 10px;margin-top: 21px; color: #333;">妇产科</b>
   
               <!-- 下拉菜单 -->
               <el-dropdown style="margin-left: 20px;margin-top: 22px;">
                   <el-button 
                       type="primary" 
                       size="small" 
                       style="background-color: #409EFF; color: white; border-radius: 4px; font-size: 14px; padding: 5px 15px;">
                       点击选择 <i class="el-icon-arrow-down"></i>
                   </el-button>
                   <el-dropdown-menu slot="dropdown" style="min-width: 200px;">
                       <el-dropdown-item 
                           v-for="woman in women" 
                           :key="woman"
                           class="dropdown-item">
                           <el-button
                               size="mini"
                               @click="sectionClick(woman)"
                               style="width: 100%; text-align: left; background-color: transparent; border: none;">
                               {{ woman }}
                           </el-button>
                       </el-dropdown-item>
                   </el-dropdown-menu>
               </el-dropdown>
           </div>
           <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center; margin-bottom: 20px;">
               <i class="iconfont icon-r-love" style="font-size: 26px; color: #409EFF;margin-top: 22px;margin-left: 5px;"></i>
               <b style="margin-left: 10px;margin-top: 21px; color: #333;">儿科类</b>
   
               <!-- 下拉菜单 -->
               <el-dropdown style="margin-left: 20px;margin-top: 22px;">
                   <el-button 
                       type="primary" 
                       size="small" 
                       style="background-color: #409EFF; color: white; border-radius: 4px; font-size: 14px; padding: 5px 15px;">
                       点击选择 <i class="el-icon-arrow-down"></i>
                   </el-button>
                   <el-dropdown-menu slot="dropdown" style="min-width: 200px;">
                       <el-dropdown-item 
                           v-for="kid in kids" 
                           :key="kid"
                           class="dropdown-item">
                           <el-button
                               size="mini"
                               @click="sectionClick(kid)"
                               style="width: 100%; text-align: left; background-color: transparent; border: none;">
                               {{ kid }}
                           </el-button>
                       </el-dropdown-item>
                   </el-dropdown-menu>
               </el-dropdown>
           </div>
           
       </div>
       <el-divider></el-divider>
       <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center;">
    
    
    <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center; margin-bottom: 20px;">
        <i class="iconfont icon-r-love" style="font-size: 26px; color: #409EFF;margin-top: 22px;margin-left: 5px;"></i>
        <b style="margin-left: 10px;margin-top: 21px; color: #333;">五官科类</b>

        <!-- 下拉菜单 -->
        <el-dropdown style="margin-left: 20px;margin-top: 22px;">
            <el-button 
                type="primary" 
                size="small" 
                style="background-color: #409EFF; color: white; border-radius: 4px; font-size: 14px; padding: 5px 15px;">
                点击选择 <i class="el-icon-arrow-down"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="min-width: 200px;">
                <el-dropdown-item 
                    v-for="five in fives" 
                    :key="five"
                    class="dropdown-item">
                    <el-button
                        size="mini"
                        @click="sectionClick(five)"
                        style="width: 100%; text-align: left; background-color: transparent; border: none;">
                        {{ five }}
                    </el-button>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center; margin-bottom: 20px;">
        <i class="iconfont icon-r-love" style="font-size: 26px; color: #409EFF;margin-top: 22px;margin-left: 5px;"></i>
        <b style="margin-left: 10px;margin-top: 21px; color: #333;">中医科</b>

        <!-- 下拉菜单 -->
        <el-dropdown style="margin-left: 20px;margin-top: 22px;">
            <el-button 
                type="primary" 
                size="small" 
                style="background-color: #409EFF; color: white; border-radius: 4px; font-size: 14px; padding: 5px 15px;">
                点击选择 <i class="el-icon-arrow-down"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="min-width: 200px;">
                <el-dropdown-item 
                    v-for="chinese in chineses" 
                    :key="kid"
                    class="dropdown-item">
                    <el-button
                        size="mini"
                        @click="sectionClick(chinese)"
                        style="width: 100%; text-align: left; background-color: transparent; border: none;">
                        {{ chinese }}
                    </el-button>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <div class="sectionIndex" style="font-size: 24px; display: flex; align-items: center; margin-bottom: 20px;">
        <i class="iconfont icon-r-love" style="font-size: 26px; color: #409EFF;margin-top: 22px;margin-left: 5px;"></i>
        <b style="margin-left: 10px;margin-top: 21px; color: #333;">其他类</b>

        <!-- 下拉菜单 -->
        <el-dropdown style="margin-left: 20px;margin-top: 22px;">
            <el-button 
                type="primary" 
                size="small" 
                style="background-color: #409EFF; color: white; border-radius: 4px; font-size: 14px; padding: 5px 15px;">
                点击选择 <i class="el-icon-arrow-down"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="min-width: 200px;">
                <el-dropdown-item 
                    v-for="orther in orthers" 
                    :key="orther"
                    class="dropdown-item">
                    <el-button
                        size="mini"
                        @click="sectionClick(orther)"
                        style="width: 100%; text-align: left; background-color: transparent; border: none;">
                        {{ orther }}
                    </el-button>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</div>
    <el-divider></el-divider>
        </el-card>
    </div>
</template>
<script>
import { toLoad } from "@/utils/initialize.js";
export default {
    name: "orderOperate",
    data() {
        return {
            inters: [
                "神经内科",
                "呼吸与危重症医学科",
                "内分泌科",
                "消化内科",
                "心血管内科",
                "肾内科",
                "发热门诊",
                "血液科",
            ],
            outs: [
                "手足外科",
                "普通外科",
                "心胸外科",
                "肛肠外科",
                "泌尿外科",
                "神经外科",
                "骨科",
                "烧伤整形外科",
            ],
            women: ["妇科", "产科"],
            kids: ["儿科", "儿童保健科"],
            fives: ["耳鼻喉科", "眼科", "口腔科"],
            chineses: ["中医科","针灸推拿科"],
            orthers: ["心理科","康复医学科", "急诊科", "皮肤科"],
        };
    },
    methods: {
        //点击科室
        sectionClick(sectionOpt) {
            this.$router.push({
                path: "/sectionMessage?sectionOpt=" + sectionOpt,
            });
        },
    },
    mounted() {
      toLoad()
    }
};
</script>
<style scoped lang="scss">
ul li {
    display: inline;
}
.el-breadcrumb {
    margin: 8px;
}
</style>